<template>
	<view class="attendance-manage-container" :class="{'landscape-mode': isLandscape}">
		<!-- 顶部标题 - 只在竖屏显示 -->
		<view class="header" v-if="!isLandscape">
			<view class="terminal-selector" @tap="toggleCompanySelector">
				<text class="terminal-title">{{selectedCompany.name}}</text>
				<uv-icon name="arrow-down" color="#333" size="20"></uv-icon>
			</view>
		</view>

		<!-- 周选择器 - 只在竖屏显示 -->
		<view class="week-selector" v-if="!isLandscape">
			<view class="week-label">
				<text>Week of</text>
				<!-- <text class="line"></text> -->
			</view>
			<view class="date-picker" @click="showDatePicker = true">
				<image class="calendar-icon" src="/static/uniapp/duration.png" mode="aspectFit"></image>
				<text class="selected-date">{{selectedDate}}</text>
				<image src="/static/uniapp/arrow-down.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content">

			<!-- 员工表格 -->
			<view class="employee-table">
				<!-- 导出按钮 - 只在竖屏显示 -->
				<view class="export-action" @click="toggleOrientation">
					<image class="export-icon" src="/static/image/fxshouji.png" mode="aspectFit"></image>
				</view>
				<!-- 表格区域 -->
				<view class="table-container">
					<!-- 水平滚动容器 -->
					<scroll-view scroll-x class="scroll-view-x" :class="{'landscape-scroll': isLandscape}"
						:show-scrollbar="false" @scroll="onTableScroll" :scroll-left="scrollLeft">
						<!-- 表头 -->
						<view class="table-header">
							<view class="header-cell employee-name">
								<text>Employee Name</text>
							</view>
							<view class="header-cell fedex-id">
								<text>Fedex ID</text>
							</view>
							<view class="header-cell employee-id">
								<text>Employee ID</text>
							</view>
							<view class="header-cell date-day-container" v-for="(date, index) in headerDates"
								:key="index">
								<text class="date-text">{{date.dateText}}</text>
								<text class="day-text">{{date.dayText}}</text>
							</view>
						</view>
					</scroll-view>

					<!-- 表格内容 -->
					<scroll-view scroll-y class="table-body" @scroll="onVerticalScroll" :scroll-top="scrollTop">
						<scroll-view scroll-x class="scroll-view-x" :class="{'landscape-scroll': isLandscape}"
							@scroll="onContentScroll" :scroll-left="scrollLeft">
							<view v-for="(item, index) in employeeList" :key="index" class="table-row">
								<view class="cell employee-name">
									<text>{{item.Employeename}}</text>
								</view>
								<view class="cell fedex-id">
									<text>{{item.FedexID}}</text>
								</view>
								<view class="cell employee-id">
									<text>{{item.SystemID}}</text>
								</view>
								<view class="cell  date-day-container" v-for="items in item.Indexname" :key="items.date">
									<text>{{item.am}}</text>
									<text>{{item.pm}}</text>
								</view>
								// <view class="cell  date-day-container">
								// 	<text>{{item.am}}</text>
								// 	<text>{{item.pm}}</text>
								// </view>
								// <view class="cell  date-day-container">
								// 	<text>{{item.am}}</text>
								// 	<text>{{item.pm}}</text>
								// </view>
								// <view class="cell  date-day-container">
								// 	<text>{{item.am}}</text>
								// 	<text>{{item.pm}}</text>
								// </view>
								// <view class="cell  date-day-container">
								// 	<text>{{item.am}}</text>
								// 	<text>{{item.pm}}</text>
								// </view>
								// <view class="cell  date-day-container">
								// 	<text>{{item.am}}</text>
								// 	<text>{{item.pm}}</text>
								// </view>
								// <view class="cell  date-day-container">
								// 	<text>{{item.am}}</text>
								// 	<text>{{item.pm}}</text>
								// </view>
							</view>
						</scroll-view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 底部导出按钮 - 固定在底部，只在竖屏显示 -->
		<view class="footer" v-if="!isLandscape">
			<view class="export-buttons">
				<view class="export-btn excel-btn btn submit" @click="exportExcel">

					<uv-icon size="30" color="#fff" name="download"></uv-icon>
					<text>Excel</text>
				</view>
				<view class="export-btn pdf-btn btn submit" @click="exportPDF">
					<uv-icon size="30" color="#fff" name="download"></uv-icon>
					<text>PDF</text>
				</view>
			</view>
		</view>

		<!-- 日期选择弹窗 -->
		<view class="date-picker-popup" v-if="showDatePicker" @tap.stop="showDatePicker = false">
			<view class="date-picker-content" @tap.stop>
				<!-- 日历头部 -->
				<view class="calendar-header">
					<view class="prev-month" @tap="changeMonth(-1)">
						<image class="nav-arrow" src="/static/uniapp/arrow-left.png">
						</image>
					</view>
					<view class="current-month">
						<text>{{currentMonth}} {{currentYear}}</text>
					</view>
					<view class="next-month" @tap="changeMonth(1)">
						<image class="nav-arrow" src="/static/uniapp/arrow-right.png"></image>
					</view>
				</view>

				<!-- 星期标题 -->
				<view class="week-days">
					<view class="week-day" v-for="(day, index) in weekDays" :key="index"
						:class="{ 'friday': index === 5 }">
						<text>{{day}}</text>
					</view>
				</view>

				<!-- 日期网格 -->
				<view class="calendar-grid">
					<view v-for="(date, index) in calendarDays" :key="index" class="calendar-day" :class="{ 
							'other-month': date.otherMonth,
							'selected': isDateSelected(date),
							'in-range': isInDateRange(date),
							'friday': date.date.getDay() === 5 && !date.otherMonth,
							'selectable': date.date.getDay() === 5 && !date.otherMonth,
							'non-selectable': date.date.getDay() !== 5 || date.otherMonth
						}" @tap="(date.date.getDay() === 5 && !date.otherMonth) ? selectCalendarDate(date) : null">
						<text>{{date.day}}</text>
					</view>
				</view>

				<!-- 按钮区域 -->
				<view class="calendar-actions">
					<view class="submit-btn" @tap="submitDateSelection">
						<text>Submit Date</text>
					</view>
					<view class="close-btn" @tap="showDatePicker = false">
						<text>Close Message</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 公司选择弹窗 -->
		<view class="company-selector-popup" v-if="showCompanySelector" @tap="showCompanySelector = false">
			<view class="company-selector-content" @tap.stop>
				<view class="company-selector-title">
					<text>选择公司</text>
				</view>

				<view class="company-list">
					<view class="company-item" @tap="selectCompany(item)" v-for="item in companyList" :key="item.id"
						:class="{ active: companyId === item.id }">
						<view class="radio-circle" :class="{ 'radio-selected': companyId === item.id }">
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>

				<view class="close-company-btn" @tap="showCompanySelector = false">
					<text>Close</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getaddressBook, getMyCompanyList } from '@/api/approval'
	import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
	import { PerformanceTable } from '@/api/home'
	import { DownloadFile } from '@/util/index.js'
	export default {
		data() {
			return {
				companyList: [],
				isLandscape: false,
				selectedCompany: 'Terminal Name',
				showCompanySelector: false,
				selectedDate: 'Dec 28th',
				showDatePicker: false,
				currentMonth: 'November',
				currentYear: 2025,
				weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
				selectedDateObj: new Date(2025, 4, 14),
				rangeStart: null,
				rangeEnd: null,
				calendarDays: [],
				scrollLeft: 0,
				scrollTop: 0,
				dateList: [
					'Dec 7th',
					'Dec 14th',
					'Dec 21st',
					'Dec 28th',
					'Jan 4th',
					'Jan 11th',
					'Jan 18th'
				],
				employeeList: [{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '9:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				},
				{
					name: 'Sanna',
					fedexId: '13389800952',
					employeeId: '13389800952',
					am: '8:00',
					pm: '17:00'
				}
				]
			}
		},
		computed: {
			// 计算表头显示的7天日期（从selectedDateObj往前推6天）
			headerDates() {
				if (!this.selectedDateObj) return [];

				const dates = [];
				// 从选中日期开始，往前推6天
				for (let i = 6; i >= 0; i--) {
					const date = new Date(this.selectedDateObj);
					date.setDate(date.getDate() - i);

					// 格式化日期为 YYYY.M.D
					const year = date.getFullYear();
					const month = date.getMonth() + 1;
					const day = date.getDate();

					// 获取星期几
					const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
					const weekday = weekdays[date.getDay()];

					dates.push({
						dateText: `${year}.${month}.${day}`,
						dayText: weekday
					});
				}

				return dates;
			}
		},
		onLoad() {
			this.getlist()
			this.getTablelist()
		},
		methods: {
			async getTablelist(is_report = 0) {
				let apiData = {
					date: dayjs(this.selectedDateObj).format('YYYY-MM-DD'),
					company_id: this.selectedCompany.id,
					is_report,
					report_type: 1,
				}
				let list = await PerformanceTable(apiData) || []
				if (is_report) {
					DownloadFile(list.excel)
					return
				}
				this.employeeList = list
			},
			async getlist() {
				this.companyList = await getMyCompanyList() || []
				this.selectedCompany = this.companyList[0]
				this.companyId = this.companyList[0].id
			},

			// 屏幕旋转方法
			toggleOrientation() {
				this.isLandscape = !this.isLandscape;
				// 使用更兼容的方式控制屏幕方向
				try {
					// 检查 plus 环境是否可用（App环境）
					if (typeof plus !== 'undefined') {
						if (this.isLandscape) {
							// 切换到横屏
							plus.screen.lockOrientation('landscape');
						} else {
							// 切换到竖屏
							plus.screen.lockOrientation('portrait');
						}
						return;
					}

					// H5环境尝试使用Web API
					if (typeof screen !== 'undefined' && screen.orientation) {
						if (this.isLandscape) {
							screen.orientation.lock('landscape').catch(err => {
								console.error('无法锁定横屏', err);
							});
						} else {
							screen.orientation.lock('portrait').catch(err => {
								console.error('无法锁定竖屏', err);
							});
						}
					}
				} catch (e) {
					console.error('设置屏幕方向失败', e);
					// 至少在UI上反映出状态变化
					this.isLandscape = !this.isLandscape;
				}
			},

			// 监听设备方向变化
			listenOrientationChange() {
				const self = this;

				// 使用uni-app监听
				uni.onWindowResize(() => {
					const info = uni.getWindowInfo();
					if (info.windowWidth > info.windowHeight) {
						self.isLandscape = true;
					} else {
						self.isLandscape = false;
					}
				});

				// 浏览器API备选
				if (typeof window !== 'undefined') {
					window.addEventListener('orientationchange', function () {
						if (window.orientation === 90 || window.orientation === -90) {
							self.isLandscape = true;
						} else {
							self.isLandscape = false;
						}
					});
				}
			},

			// 公司选择方法
			toggleCompanySelector() {
				console.log('Terminal selector clicked');
				this.showCompanySelector = !this.showCompanySelector;
			},
			selectCompany(company) {
				this.selectedCompany = company;
				this.showCompanySelector = false;
				this.getTablelist()
			},

			// 日历相关方法
			generateCalendar() {
				// 使用更新后的方法生成初始日历
				const monthIndex = this.getMonthIndex(this.currentMonth);
				this.updateCalendarForMonth(monthIndex);
			},

			getMonthIndex(monthName) {
				const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
					'October', 'November', 'December'
				];
				return months.indexOf(monthName);
			},

			changeMonth(delta) {
				// 处理月份切换
				const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
					'October', 'November', 'December'
				];
				const currentIndex = months.indexOf(this.currentMonth);
				let newIndex = currentIndex + delta;

				if (newIndex < 0) {
					newIndex = 11;
					this.currentYear--;
				} else if (newIndex > 11) {
					newIndex = 0;
					this.currentYear++;
				}

				this.currentMonth = months[newIndex];

				// 根据新月份更新日历数据
				this.updateCalendarForMonth(newIndex);
			},

			updateCalendarForMonth(monthIndex) {
				// 基于月份更新日历数据
				const year = this.currentYear;
				const month = monthIndex;

				// 计算当月第一天是星期几
				const firstDay = new Date(year, month, 1).getDay();
				// 计算当月有多少天
				const daysInMonth = new Date(year, month + 1, 0).getDate();
				// 计算上月有多少天
				const daysInPrevMonth = new Date(year, month, 0).getDate();

				let calendarDays = [];

				// 添加上个月的日期
				const prevMonth = month === 0 ? 11 : month - 1;
				const prevYear = month === 0 ? year - 1 : year;

				for (let i = 0; i < firstDay; i++) {
					const day = daysInPrevMonth - firstDay + i + 1;
					calendarDays.push({
						day: day,
						otherMonth: true,
						date: new Date(prevYear, prevMonth, day)
					});
				}

				// 添加当月的日期
				for (let i = 1; i <= daysInMonth; i++) {
					calendarDays.push({
						day: i,
						otherMonth: false,
						date: new Date(year, month, i)
					});
				}

				// 添加下个月的日期（补齐到42个格子，即6行7列）
				const nextMonth = month === 11 ? 0 : month + 1;
				const nextYear = month === 11 ? year + 1 : year;
				const remainingDays = 42 - calendarDays.length;

				for (let i = 1; i <= remainingDays; i++) {
					calendarDays.push({
						day: i,
						otherMonth: true,
						date: new Date(nextYear, nextMonth, i)
					});
				}

				this.calendarDays = calendarDays;

				// 更新月份相关的选中日期
				this.updateSelectedDatesForMonth(month);
			},

			updateSelectedDatesForMonth(month) {
				// Set default selected date for current month if none is selected
				if (!this.selectedDateObj) {
					// Find the first Friday of the month
					const firstDayOfMonth = new Date(this.currentYear, month, 1);
					const daysUntilFriday = (5 - firstDayOfMonth.getDay() + 7) % 7;
					const firstFriday = new Date(this.currentYear, month, 1 + daysUntilFriday);

					this.selectedDateObj = firstFriday;
				}
			},

			isDateSelected(date) {
				// Check if the provided date matches the selected date
				if (!this.selectedDateObj) return false;

				return this.selectedDateObj.getFullYear() === date.date.getFullYear() &&
					this.selectedDateObj.getMonth() === date.date.getMonth() &&
					this.selectedDateObj.getDate() === date.date.getDate();
			},

			isInDateRange(date) {
				// For single date selection, this is the same as isDateSelected
				return this.isDateSelected(date);
			},

			selectCalendarDate(date) {
				console.log('selectCalendarDate', date)
				// Only allow selecting Fridays
				if (date.date.getDay() === 5) { // 5 is Friday (0 is Sunday, 1 is Monday, etc.)
					this.selectedDateObj = date.date;
				} else {
					// Optional: Show a notification that only Fridays can be selected
					uni.showToast({
						title: 'Only Fridays can be selected',
						icon: 'none',
						duration: 2000
					});
				}
			},

			submitDateSelection() {
				// Update the selected date display based on single selected date
				if (this.selectedDateObj) {
					const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
					const month = months[this.selectedDateObj.getMonth()];
					const day = this.getOrdinalDay(this.selectedDateObj.getDate());

					this.selectedDate = `${month} ${day}`;
					this.getTablelist()
				}
				this.showDatePicker = false;
			},
			getOrdinalDay(day) {
				if (day > 3 && day < 21) return day + "th";
				switch (day % 10) {
					case 1:
						return day + "st";
					case 2:
						return day + "nd";
					case 3:
						return day + "rd";
					default:
						return day + "th";
				}
			},

			// 原有方法
			selectDate(date) {
				this.selectedDate = date;
				this.showDatePicker = false;
			},
			exportExcel() {
				// 导出Excel文件
				uni.showToast({
					title: 'Exporting Excel...',
					icon: 'none'
				});
				this.getTablelist(1)
			},
			exportPDF() {
				// 导出PDF文件
				uni.showToast({
					title: 'Exporting PDF...',
					icon: 'none'
				});
				this.getTablelist(2)
			},
			// 表格滚动同步方法
			onTableScroll(e) {
				// 更新滚动位置状态
				this.scrollLeft = e.detail.scrollLeft;
			},
			onContentScroll(e) {
				// 更新滚动位置状态
				this.scrollLeft = e.detail.scrollLeft;
			},
			onVerticalScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			}
		},
		mounted() {
			this.generateCalendar();
			this.listenOrientationChange();

			// 根据当前方向设置初始状态
			if (window.orientation === 90 || window.orientation === -90) {
				this.isLandscape = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.attendance-manage-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;
	}

	/* 横屏模式样式 */
	.landscape-mode {
		flex-direction: column;
		padding: 0;
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;

		// margin-top: 30rpx;
		.main-content {
			padding-bottom: 0;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.employee-table {
			margin: 0;
			border-radius: 0;
			height: 100vh;
			width: 100vw;
			border: none;
		}

		.table-container {
			height: 100vh;
			width: 100vw;
		}

		.table-header {
			background-color: #f8f8f8;
		}

		.header-cell,
		.cell {
			flex: 0 0 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.date-day-container {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.date-text {
			font-size: 24rpx;
			color: #666;
		}

		.day-text {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}

		.table-body {
			height: calc(100vh - 110rpx);
		}

		.table-row:nth-child(odd) {
			background-color: #f5f5f5;
		}
	}

	/* 横竖屏切换按钮 */
	.orientation-toggle {
		position: fixed;
		right: 20rpx;
		bottom: 20rpx;
		background-color: rgba(23, 163, 100, 0.8);
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		z-index: 100;
	}

	/* 顶部标题样式 */
	.header {
		padding-bottom: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #eee;
	}

	.terminal-selector {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		height: 84rpx;
	}

	.terminal-title {
		font-size: 38rpx;
		font-weight: 500;
		color: #333;
		margin-right: 10rpx;
	}

	/* 周选择器样式 */
	.week-selector {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border: 1px solid #eee;
	}

	.week-label {
		font-weight: 400;
		font-size: 12px;
		color: #475467;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-right: 30rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		height: 50rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
		border-right: 1px solid #D0D5DD;
	}

	.line {
		font-size: 62rpx;
		color: #D0D5DD;
		font-weight: 300;
		line-height: 1;
		margin-left: 10rpx;
		display: inline-flex;
		align-items: center;
		transform: translateY(-4rpx);
	}

	.date-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.calendar-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 16rpx;
		color: #0E623D;
	}

	.selected-date {
		color: #333;
		flex: 1;
		font-weight: 400;
		font-size: 26rpx;
		color: #1D232E;
		line-height: 19px;
		text-align: left;
	}

	/* 导出按钮样式 */
	.export-action {
		display: flex;
		justify-content: right;
		margin: 20rpx;
	}

	.export-icon {
		width: 50rpx;
		height: 50rpx;
	}

	/* 主内容区域 */
	.main-content {
		flex: 1;
		overflow: hidden;
		padding-bottom: 140rpx;
		/* 为底部按钮留出空间 */
	}

	/* 员工表格样式 */
	.employee-table {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.table-container {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.scroll-view-x {
		white-space: nowrap;
		width: 100%;
	}

	.table-header {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		width: fit-content;
		min-width: 100%;
		overflow: hidden;
	}

	.header-cell {
		flex: 0 0 200rpx;
		padding: 0 20rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.date-day-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.date-text {

		margin-bottom: 8rpx;
	}

	.day-text {
		font-size: 24rpx;
		font-weight: 500;
	}

	.table-body {
		flex: 1;
		overflow-y: auto;
	}

	.table-row {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
		width: fit-content;
		min-width: 100%;
	}

	.cell {
		flex: 0 0 200rpx;
		padding: 0 20rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 底部固定导航 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		/* 兼容iPhone X及以上机型 */
		z-index: 10;
	}

	/* 底部导出按钮样式 */
	.export-buttons {
		display: flex;
		padding: 0rpx 14rpx;
		justify-content: space-between;
		width: 100%;
	}

	.export-btn {
		height: 90rpx;
		border-radius: 100rpx;
		border: 2rpx solid #17A364;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.export-btn text {
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.download {
		width: 40rpx;
		height: 40rpx;
	}

	.employee-name {
		text-align: left;
		padding-left: 60rpx;
	}

	.fedex-id,
	.employee-id {
		text-align: center;
	}

	/* 日期选择弹窗样式 */
	.date-picker-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		/* 改为底部对齐 */
	}

	.date-picker-content {
		width: 100%;
		/* 宽度占满 */
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		/* 只保留顶部圆角 */
		padding: 30rpx;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease;
		/* 添加向上滑动动画 */
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.current-month {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.nav-arrow {
		width: 50rpx;
		height: 50rpx;
	}

	.week-days {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.week-day {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.week-day.friday {
		color: #17A364;
		font-weight: bold;
	}

	.calendar-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
	}

	.calendar-day {
		width: 14.2857%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;
		position: relative;
	}

	.calendar-day text {
		font-size: 28rpx;
		color: #ccc;
		/* Changed to light gray for all dates */
		position: relative;
		z-index: 2;
	}

	.other-month text {
		color: #eee;
		/* Even lighter for other months */
	}

	.selectable {
		position: relative;
	}

	.non-selectable {
		opacity: 0.5;
	}

	.friday text {
		color: #17A364;
		font-weight: 500;
	}

	.other-month text {
		color: #eee !important;
		/* Force gray for dates from other months */
	}

	.selected,
	.in-range {
		position: relative;
	}

	.selected::before,
	.in-range::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60rpx;
		height: 60rpx;
		background-color: #17A364;
		border-radius: 50%;
		z-index: 1;
	}

	.selected text,
	.in-range text {
		color: #fff !important;
	}

	.calendar-actions {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.submit-btn {
		background-color: #17A364;
		border-radius: 50rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit-btn text {
		color: #fff;
		font-size: 32rpx;
	}

	.close-btn {
		border: 1px solid #17A364;
		border-radius: 50rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-btn text {
		color: #17A364;
		font-size: 32rpx;
	}

	/* 公司选择弹窗样式 */
	.company-selector-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		/* 改为底部对齐 */
	}

	.company-selector-content {
		width: 100%;
		/* 宽度占满 */
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		/* 只保留顶部圆角 */
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease;
		/* 添加向上滑动动画 */
	}

	.company-selector-title {
		font-size: 38rpx;
		color: #333;
		font-weight: 500;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.company-list {
		margin-bottom: 40rpx;
	}

	.company-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.radio-circle {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #E5E7EB;
		margin-right: 20rpx;
		background-color: #F9F9F9;
	}

	.radio-selected {
		border: 8rpx solid #17A364;
		background-color: #fff;
	}

	.company-item text {
		font-size: 34rpx;
		color: #333;
	}

	.close-company-btn {
		margin-top: 20rpx;
		height: 90rpx;
		border-radius: 100rpx;
		border: 1px solid #17A364;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-company-btn text {
		color: #17A364;
		font-size: 34rpx;
	}

	/* 横屏模式下的滚动条样式 */
	.landscape-scroll {
		scroll-behavior: smooth;
		/* 使滚动更平滑 */
	}
</style>